<!DOCTYPE html>
<html>
<head>
	<title>Audio</title>

	<meta name="viewport" content="width=device-width, initial-scale=1">


    <!-- jQuery Mobile -->
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
    <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>


    <!-- PhoneGap -->
    <script src="cordova-2.3.0.js"></script>


    <!-- Partial js -->
    <script src="js/database.js"></script>
    <script src="js/geolocationData.js"></script>
    <script src="js/audioData.js"></script>

    <!-- Personal CSS -->
    <link rel="stylesheet" type="text/css" href="css/style.css">

    <script type="text/javascript">
        /* creo l'ascoltatore che chiamerà la funzione onDeviceReady quando il codice
            PhoneGap è pronto per essere eseguito */
        document.addEventListener("deviceready", onDeviceReady, true);
            
            var audioCapture = ''; // variabile che conterrà l'oggetto capture
            
            function onDeviceReady() {
                //recupero gli elementi presenti nel database
                getItemsAudio();

                // ottengo l'oggetto capture
                audioCapture = navigator.device.capture;
                
                $('#record').bind('touchstart', function() {
                    getAudio();
                });


                $('#audio_list').on('tap', 'li', function() {

                    $("#my_player").html('<source src="/Users/andreavanon/Library/Application Support/iPhone Simulator/6.1/Applications/B03B16F7-788A-4164-A941-EE8A16B5D7E7/tmp/' + $(this).attr('title') + '" />');

                });

            }

            // getItemsAudio verrà eseguita se la chiamata al db avviene con successo
            function getItemsAudio() {
                db = getDatabase();
                db.transaction(function(tx) {
                    tx.executeSql("SELECT * FROM myDiary WHERE type='audio' ORDER BY date DESC", [], querySuccess, databaseError);
                }, databaseError);
            }

    </script>

    <style type="text/css">

        audio {
            width: 90%;
            position: fixed;
            z-index: 100;
            bottom: 50px;
            margin:0;
            padding:0;
        }

        img.play {
            position: absolute;
        }

    </style>

</head>
<body>

	<div data-role="page" data-add-back-btn="true">

		<header data-role="header" data-position="fixed">
			<h1>Cattura Audio</h1>
		</header>

		<div data-role="content">
			<h1>myAudio</h1>
            <div id="messageError"></div>
			<button id="record">Registra audio</button>

            <ul data-role="listview" data-divider-theme="b" data-inset="true" id="audio_list"></ul>

			<div id="objects" data-role="collapsible-set" data-theme="d" data-content-theme="d"></div>

            <audio controls id="my_player">
              <source src="/Users/andreavanon/Library/Application Support/iPhone Simulator/6.1/Applications/B03B16F7-788A-4164-A941-EE8A16B5D7E7/tmp/audio_069.wav" />
                Your browser does not support the audio element.
            </audio>

		</div>

		<footer data-role="footer" data-position="fixed">
			&copy; myUdine
		</footer>
	</div>

</body>
</html>